<template>
  <div
    ref="app-container"
    class="app-container"
    :style="{ height: height, width: width }"
  >
    <div class="tt-silder-home" v-if="option.hometool == 'y'">
      <div class="tt-silder-home-item">
        <el-slider
          v-model="sildervalue"
          :step="1"
          :max="sildermax"
          :min="sildermin"
          :format-tooltip="showsildertooltipmsg"
          @change="changesildertype"
          show-stops
        ></el-slider>
      </div>
    </div>
    <div
      :class="[
        screenfulltool == 'y' ? 'tt-silder-wrapper' : 'tt-silder-wrapper2',
      ]"
      v-if="option.hometool == 'n'"
    >
      <div class="tt-silder">
        <div>
          <span class="title-left" v-if="showversion == 'left'">
            {{ versiontext }}
          </span>
        </div>
        <div class="tt-silder-item">
          <el-slider
            v-model="sildervalue"
            :step="1"
            :max="sildermax"
            :min="sildermin"
            :format-tooltip="showsildertooltipmsg"
            @change="changesildertype"
            show-stops
          ></el-slider>
        </div>
      </div>
    </div>
    <div
      class="tt-stool"
      v-if="screenfulltool == 'y' && option.hometool == 'n'"
    >
      数据类型：
      <el-select
        v-model="selectdatavalue"
        clearable
        placeholder="请选择"
        @change="changeselectdata"
        @clear="clearselectdata"
      >
        <el-option
          v-for="item in this.selectdata"
          :key="item.key"
          :label="item.label"
          :value="item.value"
        ></el-option> </el-select
      >图表类型：
      <el-select
        v-model="selectchartvalue"
        clearable
        placeholder="请选择"
        @change="changeselectcharttype"
        @clear="clearselectcharttype"
      >
        <el-option key="heat" label="热力图层" value="heat"></el-option>
        <el-option
          key="marker"
          label="标记图层"
          value="marker"
        ></el-option> </el-select
      >&nbsp;
      <el-button type="primary" icon="el-icon-search" @click="showdialog"
        >搜索</el-button
      >
      <span class="title-right" v-if="showversion == 'right'">
        {{ versiontext }}
      </span>
    </div>
    <div :id="this.mapid" style="height: 100%"></div>

    <el-dialog
      title="选择时间范围"
      :visible.sync="dialogTableVisible"
      @close="dialogclose"
      width="800px"
      ref="searchdialogref"
    >
      <div style="margin-top: 20px">
        <el-row>
          <el-col :span="10">
            起始时间：
            <el-date-picker
              v-model="starttime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              value-format="yyyyMMddHHmmss"
            ></el-date-picker>
          </el-col>
          <el-col :span="10">
            结束时间：
            <el-date-picker
              v-model="endtime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              value-format="yyyyMMddHHmmss"
            ></el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="getStartAndEndDate"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <el-table
        ref="multipleTable"
        v-loading="tableloading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="version"
          label="日期"
          width="700px"
        ></el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection(true)">确定</el-button>
        <el-button @click="toggleSelection(false)">取消选择</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import resize from "../mixins/resize";
import OlddarkStyle from "./OlddarkStyle.json";
import darkStyle from "./darkStyle.json";
import normalStyle from "./normalStyle.json";
import mapdata from "./res.json";
import screenfull from "screenfull";
import moment from "moment";
import $ from "jquery";

moment.locale("zh-cn");

const mapicon_red = new BMap.Icon(
  "/marker_red_small.png",
  new BMap.Size(20, 20)
);
const mapicon_yellow = new BMap.Icon(
  "/marker_yellow_small.png",
  new BMap.Size(20, 20)
);

export default {
  mixins: [resize],
  name: "cmap",
  props: {
    showtool: {
      type: String,
      default: "y",
    },
    height: {
      type: String,
      default: "1000px",
    },
    width: {
      type: String,
      default: "100%",
    },
    mapid: {
      type: String,
      default: "map_container",
    },
    option: {
      type: Object,
      default: () => ({
        showmarker: "y",
        showheat: "y",
        datatype: ["allExit"],
        hometool: "n",
        home: "n",
      }),
    },
  },
  data() {
    return {
      tableloading: false,
      multipleSelection: [],
      tableData: [],
      searchData: [],
      dialogTableVisible: false,
      starttime: "",
      endtime: "",
      selectdata: [],
      selectdatavalue: "",
      selectchartvalue: "",
      screentext: "全屏",
      screenfulltool: "y",
      isfullscreen: false,
      sildervalue: 12,
      sildermax: 10,
      sildermin: 0,
      showversion: "right",
      versiontext: "",
      map: {},
      view: {},
      layer: {},
      heatmapOverlay: {},
      boundarys: [{ 沈阳市: [] }],
      markers: [],
      heats: [],
      version: "",
      versions: [],
      mpoints: [],
      polygons: [],
      vinterval: null,
    };
  },
  created() {
    //this.getLocalData(mapdata);
    this.getServerData();
    this.initTool();
    this.$emit("toversion", this.versiontext);
    this.initsilderdata();
  },
  mounted() {
    let _this = this;
    this.$nextTick(() => {
      this.map = this.initMap();
      //this.map.centerAndZoom(this.map.getCenter(), this.map.getZoom());
      this.initChart(this.version);

      if (this.option.hometool == "y") {
        setTimeout(() => {
          _this.startInterval();
        }, 30000);
      }
      if (this.option.home == "y") {
        setTimeout(() => {
          let point = new BMap.Point(123.17152, 41.269402);
          this.map.centerAndZoom(point, 7);
        }, 5000);
      }
    });
  },
  computed: {
    sversions() {
      return [...this.versions].sort();
    },
  },
  methods: {
    closeInterval() {
      if (this.vinterval) {
        clearInterval(this.vinterval);
      }
    },
    startInterval() {
      let i = 0;
      this.vinterval = setInterval(() => {
        this.mpoints.forEach((m) => {
          this.map.removeOverlay(m);
        });
        this.version = this.sversions[i];
        this.initChart(this.version);
        this.handleTitle(this.version);
        this.$emit("toversion", this.versiontext);
        this.sildervalue = i;
        if (i == this.sversions.length - 1) {
          i = 0;
        } else {
          i++;
        }
      }, 5000);
    },
    toggleSelection(flag) {
      if (flag) {
        let tempdata = [];
        for (let k of this.searchData) {
          for (let v of this.multipleSelection) {
            if (k.hasOwnProperty(v["version"])) {
              tempdata.push(k);
            }
          }
        }
        this.getLocalData(tempdata);
        this.dialogclose();
        this.initsilderdata();
        this.initChart(this.version);
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getStartAndEndDate() {
      let _this = this;
      let ops = {};
      Object.assign(ops, this.option, this.$route.query);
      let param = "stop";
      for (let d of ops.datatype) {
        if (d.indexOf("Exit") > -1) {
          param = "exit";
          break;
        }
      }
      _this.tableloading = true;
      $.ajax({
        url:
          process.env.VUE_APP_BASE_API +
          "/tietasystem/index/searchStatistics?datatype=" +
          param +
          "&begintime=" +
          this.starttime +
          "&endtime=" +
          this.endtime,
        //async: false,
        beforeSend: function () {},
        success: function (res) {
          _this.searchData = res.data;
          for (let a of _this.searchData) {
            _this.tableData.push({
              version: Object.keys(a)[0],
            });
          }
          if (!res.data || res.data.length == 0) {
            _this.tableData = [];
          }
          _this.tableloading = false;
        },
        error() {
          _this.tableloading = false;
        },
      });
    },
    showdialog() {
      this.dialogTableVisible = true;
    },
    dialogclose() {
      this.dialogTableVisible = false;
    },

    showsildertooltipmsg(index) {
      let i = index || 0;
      return moment(this.sversions[i], "YYYYMMDDHHmm").format("lll");
    },
    initsilderdata() {
      this.sildermax = this.versions.length - 1;
      this.sildermin = 0;
      this.sildervalue = this.sildermax;
    },
    initTool() {
      let options = Object.assign(this.option, this.$route.query);
      for (let v of options.datatype) {
        switch (v) {
          case "commonExit":
            this.selectdata.push({
              key: "commonExit",
              label: "普通站址退服数据",
              value: "commonExit",
            });
            break;
          case "commonStop":
            this.selectdata.push({
              key: "commonStop",
              label: "普通站址停电数据",
              value: "commonStop",
            });
            break;
          case "importantExit":
            this.selectdata.push({
              key: "importantExit",
              label: "关键站址退服数据",
              value: "importantExit",
            });
            break;
          case "importantStop":
            this.selectdata.push({
              key: "importantStop",
              label: "关键站址停电数据",
              value: "importantStop",
            });
            break;
        }
      }
    },
    getLocalData(mapdata) {
      this.versions = [];
      this.markers = [];
      this.heats = [];
      for (let ver of mapdata) {
        let key = Object.keys(ver)[0];
        this.versions.push(key);
        let allExit = [];
        let allStop = [];
        let commonExit = [];
        let commonStop = [];
        let importantExit = [];
        let importantStop = [];
        for (let geo of ver[key]) {
          switch (geo.type) {
            case "allExit":
              allExit.push({
                longitude: geo.geometry.coordinates[0],
                latitude: geo.geometry.coordinates[1],
                stationName: geo.properties.stationName || "",
                stationCode: geo.properties.stationCode || "",
                alarmTitle: geo.properties.alarmTitle || "",
                operator: geo.properties.operator || "",
                operatorMaintenanceLevel:
                  geo.properties.operatorMaintenanceLevel || "",
                alarmTime: geo.properties.alarmTime || "",
                isImportant: geo.properties.isImportant || "",
              });
              break;
            case "allStop":
              allStop.push({
                longitude: geo.geometry.coordinates[0],
                latitude: geo.geometry.coordinates[1],
                stationName: geo.properties.stationName || "",
                stationCode: geo.properties.stationCode || "",
                alarmTitle: geo.properties.alarmTitle || "",
                operator: geo.properties.operator || "",
                operatorMaintenanceLevel:
                  geo.properties.operatorMaintenanceLevel || "",
                alarmTime: geo.properties.alarmTime || "",
                isImportant: geo.properties.isImportant || "",
              });
              break;
            case "commonExit":
              commonExit.push({
                longitude: geo.geometry.coordinates[0],
                latitude: geo.geometry.coordinates[1],
                stationName: geo.properties.stationName || "",
                stationCode: geo.properties.stationCode || "",
                alarmTitle: geo.properties.alarmTitle || "",
                operator: geo.properties.operator || "",
                operatorMaintenanceLevel:
                  geo.properties.operatorMaintenanceLevel || "",
                alarmTime: geo.properties.alarmTime || "",
                isImportant: geo.properties.isImportant || "",
              });
              break;
            case "commonStop":
              commonStop.push({
                longitude: geo.geometry.coordinates[0],
                latitude: geo.geometry.coordinates[1],
                stationName: geo.properties.stationName || "",
                stationCode: geo.properties.stationCode || "",
                alarmTitle: geo.properties.alarmTitle || "",
                operator: geo.properties.operator || "",
                operatorMaintenanceLevel:
                  geo.properties.operatorMaintenanceLevel || "",
                alarmTime: geo.properties.alarmTime || "",
                isImportant: geo.properties.isImportant || "",
              });
              break;
            case "importantExit":
              importantExit.push({
                longitude: geo.geometry.coordinates[0],
                latitude: geo.geometry.coordinates[1],
                stationName: geo.properties.stationName || "",
                stationCode: geo.properties.stationCode || "",
                alarmTitle: geo.properties.alarmTitle || "",
                operator: geo.properties.operator || "",
                operatorMaintenanceLevel:
                  geo.properties.operatorMaintenanceLevel || "",
                alarmTime: geo.properties.alarmTime || "",
                isImportant: geo.properties.isImportant || "",
              });
              break;
            case "importantStop":
              importantStop.push({
                longitude: geo.geometry.coordinates[0],
                latitude: geo.geometry.coordinates[1],
                stationName: geo.properties.stationName || "",
                stationCode: geo.properties.stationCode || "",
                alarmTitle: geo.properties.alarmTitle || "",
                operator: geo.properties.operator || "",
                operatorMaintenanceLevel:
                  geo.properties.operatorMaintenanceLevel || "",
                alarmTime: geo.properties.alarmTime || "",
                isImportant: geo.properties.isImportant || "",
              });
              break;
          }
        }
        this.versions.sort().reverse();
        this.version = this.versions[0];
        this.handleTitle(this.version);
        this.markers[key] = {
          allExit: allExit,
          allStop: allStop,
          commonExit: commonExit,
          commonStop: commonStop,
          importantExit: importantExit,
          importantStop: importantStop,
        };
        this.heats[key] = {
          allExit: allExit,
          allStop: allStop,
          commonExit: commonExit,
          commonStop: commonStop,
          importantExit: importantExit,
          importantStop: importantStop,
        };
      }
    },
    getServerData() {
      let _this = this;
      let ops = {};
      Object.assign(ops, this.option, this.$route.query);
      let param = "stop";
      for (let d of ops.datatype) {
        if (d.indexOf("Exit") > -1) {
          param = "exit";
          break;
        }
      }
      $.ajax({
        url:
          process.env.VUE_APP_BASE_API +
          "/tietasystem/index/chartStatistics?datatype=" +
          param,
        async: false,
        success: function (res) {
          _this.getLocalData(res.data);
        },
      });
    },
    handleTitle(version) {
      let start = moment(version, "YYYYMMDDHHmm").format("lll");
      // let i = this.sversions.indexOf(version);
      // if (i < this.sversions.length - 1) {
      //   let end = moment(this.sversions[i + 1], "YYYYMMDDHHmm").format("LT");
      //   this.versiontext = start + "~" + end;
      // } else {
      //   this.versiontext = start + "~至今";
      // }
      this.versiontext = start;
    },
    playHeatMap(flag) {
      setInterval(() => {}, 5000);
    },
    initMap() {
      let _this = this;
      let options = Object.assign(this.option, this.$route.query);
      let map = new BMap.Map(this.mapid);
      //map.enableKeyboard();
      map.enableScrollWheelZoom();
      map.enableInertialDragging();
      //map.disableDragging()
      //map.enableContinuousZoom();
      if (options.center && options.zoom) {
        map.centerAndZoom(
          new BMap.Point(options.center[0], options.center[1]),
          options.zoom
        );
      } else {
        let point = new BMap.Point(123.18152, 41.269402);
        map.centerAndZoom(point, 7);
      }

      let contextmenu = new BMap.ContextMenu();
      if (screenfull.isEnabled) {
        screenfull.on("change", () => {
          this.isfullscreen = !this.isfullscreen;
          if (this.isfullscreen) {
            this.screentext = "取消全屏";
            this.showversion = "left";
            this.screenfulltool = "n";
          } else {
            this.screentext = "全屏";
            this.showversion = "right";
            this.screenfulltool = "y";
          }
        });
      }
      contextmenu.addItem(
        new BMap.MenuItem("切换全屏", () => {
          _this.changescreenfull();
        })
      );

      if (this.option.hometool != "y") {
        let ops = {};
        Object.assign(ops, this.option, this.$route.query);
        let param = "stop";
        for (let d of ops.datatype) {
          if (d.indexOf("Exit") > -1) {
            param = "exit";
            break;
          }
        }
        if (param == "exit") {
          contextmenu.addItem(
            new BMap.MenuItem("关键站址退服", () => {
              this.mpoints.forEach((m) => {
                this.map.removeOverlay(m);
              });
              _this.initChart(this.version, { datatype: "importantExit" });
            })
          );
          contextmenu.addItem(
            new BMap.MenuItem("普通站址退服", () => {
              this.mpoints.forEach((m) => {
                this.map.removeOverlay(m);
              });
              _this.initChart(this.version, { datatype: "commonExit" });
            })
          );
          contextmenu.addItem(
            new BMap.MenuItem("全部退服站址", () => {
              this.mpoints.forEach((m) => {
                this.map.removeOverlay(m);
              });
              _this.initChart(this.version, {
                datatype: ["commonExit", "importantExit"],
              });
            })
          );
        } else {
          contextmenu.addItem(
            new BMap.MenuItem("关键站址停电", () => {
              this.mpoints.forEach((m) => {
                this.map.removeOverlay(m);
              });
              _this.initChart(this.version, { datatype: "importantStop" });
            })
          );
          contextmenu.addItem(
            new BMap.MenuItem("普通站址停电", () => {
              this.mpoints.forEach((m) => {
                this.map.removeOverlay(m);
              });
              _this.initChart(this.version, { datatype: "commonStop" });
            })
          );
          contextmenu.addItem(
            new BMap.MenuItem("全部停电站址", () => {
              this.mpoints.forEach((m) => {
                this.map.removeOverlay(m);
              });
              _this.initChart(this.version, {
                datatype: ["commonStop", "importantStop"],
              });
            })
          );
        }
      }
      map.addContextMenu(contextmenu);

      this.initBoudarys();
      this.addBoundaryOverlay();
      map.setMapStyle({ styleJson: darkStyle });
      // let myGeo = new BMap.Geocoder();
      // let label = null;
      map.addEventListener("mousemove", (e) => {
        if (this.polygons.length > 0) {
          this.polygons.forEach((p) => {
            if (BMapLib.GeoUtils.isPointInPolygon(e.point, p)) {
              p.setFillOpacity(0.5);
              // 根据坐标得到地址描述
              // myGeo.getLocation(e.point, function (result) {
              //   if (result) {
              //     label = new BMap.Label(result.addressComponents.city, {
              //       position: e.point,
              //     });
              //     map.addOverlay(label);
              //   }
              // });
            } else {
              p.setFillOpacity(0.1);
              // map.removeOverlay(label);
            }
          });
        }
      });
      return map;
    },
    changeselectdata(type) {
      let ops = {};
      switch (this.selectchartvalue) {
        case "heat":
          ops = { showheat: "y", showmarker: "n" };
          break;
        case "marker":
          ops = { showheat: "n", showmarker: "y" };
          break;
      }

      if (type != "" && type != "undefined") {
        this.mpoints.forEach((m) => {
          this.map.removeOverlay(m);
        });
        this.initChart(this.version, Object.assign({ datatype: [type] }, ops));
      }
    },
    clearselectdata() {
      let ops = {};
      switch (this.selectchartvalue) {
        case "heat":
          ops = { showheat: "y", showmarker: "n" };
          break;
        case "marker":
          ops = { showheat: "n", showmarker: "y" };
          break;
      }
      this.initChart(this.version, ops);
    },
    changeselectcharttype(type) {
      let ops = {};
      switch (type) {
        case "heat":
          ops = { showheat: "y", showmarker: "n" };
          break;
        case "marker":
          ops = { showheat: "n", showmarker: "y" };
          break;
      }
      if (this.selectdatavalue != "") {
        Object.assign(ops, { datatype: this.selectdatavalue });
      }
      this.initChart(this.version, ops);
    },
    clearselectcharttype() {
      let ops = {};
      this.mpoints.forEach((m) => {
        this.map.removeOverlay(m);
      });
      if (this.selectdatavalue != null) {
        Object.assign(ops, { datatype: this.selectdatavalue });
      } else {
        Object.assign(ops, this.$route.query);
      }
      this.initChart(this.version, ops);
    },
    changesildertype(index) {
      if (this.vinterval) {
        clearInterval(this.vinterval);
      }
      let ops = {};
      switch (this.selectchartvalue) {
        case "heat":
          ops = { showheat: "y", showmarker: "n" };
          break;
        case "marker":
          ops = { showheat: "n", showmarker: "y" };
          break;
      }
      if (this.selectdatavalue != "") {
        Object.assign(ops, { datatype: this.selectdatavalue });
      }
      this.mpoints.forEach((m) => {
        this.map.removeOverlay(m);
      });
      this.version = this.sversions[index];
      this.initChart(this.version, ops);
      this.handleTitle(this.version);
    },

    changescreenfull() {
      debugger;
      screenfull.toggle(this.$el);
    },
    initChart(version, opts) {
      let ops = {};
      Object.assign(ops, this.option, this.$route.query, opts);
      if (Object.keys(this.map).length === 0) {
        this.initMap();
      }
      if (!Array.isArray(ops.datatype)) {
        ops.datatype = [ops.datatype];
      }

      if (ops.showmarker == "y") {
        for (let type of ops.datatype) {
          this.getMarkers(version, type);
        }
      } else {
        this.mpoints.forEach((m) => {
          this.map.removeOverlay(m);
        });
      }

      if (ops.showheat != "y") {
        if (Object.keys(this.heatmapOverlay).length > 0) {
          this.heatmapOverlay.hide();
        }
      } else {
        if (Object.keys(this.heatmapOverlay).length == 0) {
          this.heatmapOverlay = this.getHeatMapOver();
          this.map.addOverlay(this.heatmapOverlay);
        }
        this.addHeatData(version, ops.datatype);
        this.heatmapOverlay.show();
      }
    },
    initBoudarys() {
      // if (this.boundarys.length === 0) {
      this.boundarys = [
        { 沈阳市: [] },
        { 鞍山市: [] },
        { 大连市: [] },
        { 抚顺市: [] },
        { 本溪市: [] },
        { 丹东市: [] },
        { 锦州市: [] },
        { 营口市: [] },
        { 阜新市: [] },
        { 辽阳市: [] },
        { 盘锦市: [] },
        { 铁岭市: [] },
        { 朝阳市: [] },
        { 葫芦岛市: [] },
      ];
      // }
    },
    getHeatMapOver() {
      let gradient = {
        // 对应比例渐变色
        0.25: "rgba(0, 0, 255, 1)",
        0.55: "rgba(0, 255, 0, 1)",
        0.85: "rgba(255, 255, 0, 1)",
        1: "rgba(255, 0, 0, 1)",
      };
      let heatoption = {
        radius: 15,
        visible: true,
        gradient: gradient,
        opacity: 50,
      };
      this.heatmapOverlay = new BMapLib.HeatmapOverlay(heatoption);
      return this.heatmapOverlay;
    },
    getHeatmapLayer() {
      return new mapvgl.HeatmapLayer({
        size: 15000, // 单个点绘制大小
        max: 3, // 最大阈值
        height: 0, // 最大高度，默认为0
        unit: "m", // 单位，m:米，px: 像素
        gradient: {
          // 对应比例渐变色
          0.25: "rgba(0, 0, 255, 1)",
          0.55: "rgba(0, 255, 0, 1)",
          0.85: "rgba(255, 255, 0, 1)",
          1: "rgba(255, 0, 0, 1)",
        },
      });
    },
    addBoundaryOverlay() {
      for (let city of this.boundarys) {
        new BMap.Boundary().get(Object.keys(city)[0], (res) => {
          for (let pl of res.boundaries) {
            let pol = new BMap.Polygon(pl, {
              strokeWeight: 1,
              strokeColor: "blue",
            });
            pol.setFillOpacity(0.1);
            this.map.addOverlay(pol);
            this.polygons.push(pol);
            // pol.addEventListener("mouseover", function (e) {
            //   console.log(e, pol)
            //   if (BMapLib.GeoUtils.isPointInPolygon(e.point, this)) {
            //     console.log(e, this, pol)
            //     pol.setFillOpacity(0.5);
            //   }
            // });
            // pol.addEventListener("mouseout", function (e) {
            //   console.log(e, pol)
            //   pol.setFillOpacity(0.1);
            // });
          }
        });
      }
    },
    getMarkers(version, type) {
      this.markers[version][type].forEach((item) => {
        let point = new BMap.Point(item.longitude, item.latitude);
        let marker = {};
        if (type.indexOf("important") > -1) {
          marker = new BMap.Marker(point, { icon: mapicon_red });
        } else {
          marker = new BMap.Marker(point, { icon: mapicon_yellow });
        }
        this.mpoints.push(marker);
        this.map.addOverlay(marker);

        // 创建信息窗口
        let infotitle = "";
        let infocontent = "";
        if (type.indexOf("xit") > -1) {
          if (type.indexOf("common") > -1) {
            infotitle = "普通站址退服信息明细";
          } else {
            infotitle = "关键站址退服信息明细";
          }
        } else {
          if (type.indexOf("common") > -1) {
            infotitle = "普通站址停电信息明细";
          } else {
            infotitle = "关键站址停电信息明细";
          }
        }

        infocontent =
          "<div>" +
          "站址名称:" +
          item.stationName +
          "</div>" +
          "<div>" +
          "站址编码:" +
          item.stationCode +
          "</div>" +
          "<div>" +
          "告警标题:" +
          item.alarmTitle +
          "</div>" +
          "<div>" +
          "所属运营商:" +
          item.operator +
          "</div>" +
          "<div>" +
          "运营商维护级别:" +
          item.operatorMaintenanceLevel +
          "</div>" +
          "<div>" +
          "告警发生时间:" +
          item.alarmTime +
          "</div>" +
          "<div>" +
          "是否重保" +
          item.isImportant +
          "</div>";

        var opts = {
          width: 0,
          height: 0,
          title: infotitle,
        };

        let infoWindow = new BMap.InfoWindow(infocontent, opts);
        // 点标记添加点击事件
        marker.addEventListener("click", function () {
          this.map.openInfoWindow(infoWindow, point); // 开启信息窗口
        });

        marker.setZIndex(100);
      });
    },
    addHeatData(version, type) {
      let seris = [];
      for (let t of type) {
        this.heats[version][t].forEach((item) => {
          seris.push({
            lat: item.latitude,
            lng: item.longitude,
            count: 1,
          });
        });
      }
      this.heatmapOverlay.setDataSet({ data: seris, max: 2 });
    },
    addLayerData(version, type) {
      let data = [];
      for (let t of type) {
        this.heats[version][t].forEach((item) => {
          data.push({
            geometry: {
              type: "Point",
              coordinates: [item.longitude, item.latitude],
            },
            properties: {
              count: 1,
            },
          });
        });
      }
      this.layer.setData(data);
    },
  },
};
</script>

<style scoped>
.tt-silder {
  width: 800px;
  z-index: 200;
}

.tt-silder-home {
  position: absolute;
  top: 20px;
  right: calc(50% - 200px);
  width: 400px;
  z-index: 200;
}

.tt-silder-home-item {
  position: relative;
}

.tt-silder-item {
  position: relative;
}

.tt-stool {
  margin: 10px;
}

.title-right {
  font-size: large;
  padding: 10px;
}

.title-left {
  position: absolute;
  top: 30px;
  left: 20px;
  font-size: large;
  font: bold;
  color: white;
  padding: 10px;
}
.tt-silder-wrapper {
  position: absolute;
  top: 95px;
  left: calc(50% - 400px);
  z-index: 500;
}
.tt-silder-wrapper2 {
  position: absolute;
  top: 45px;
  left: calc(50% - 400px);
  z-index: 500;
}
</style>
